<% extends "common/msui.html" %>
<% block title %>产品分类<% endblock %>
<% block body %>
<% set categorys = _pool.get('product.public.category').get_root_categorys() %>
<div class="page" id='categorys' ms-controller='categorys'>
  <header class="bar bar-nav">
    <h1 class="title">产品分类</h1>
    <a class="button button-link button-nav pull-left back" href="/mshop/index" >
      <span class="icon icon-left"></span>
      返回
    </a>
  </header>

  <div class='content category-content'>
    <div class='category'>
      <ul>
        <li ms-repeat='categorys' ms-click='choose_category(el)' ms-class='category-item-choose:choose_id === el.id'>
          <div class='category-item'>{{el.name}}</div>
        </li>
      </ul>
    </div>

    <div class='category-specific'>
      <ul class='second-category'>
        <li ms-repeat='specifics' class='second-category-item'>
          <span class='second-category-name'>{{el.name}}</span>
          <ul class='third-category'>
            <li ms-repeat='el.childrens' class='third-category-item'>
              <a ms-attr-href='/mshop/products?categ_id={{el.id}}'>
                <img ms-attr-src='/website/image/product.public.category/{{el.id}}/image_medium' ms-attr-alt='{{el.name}}' />
                <span>{{el.name}}</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>


  <script type="application/javascript">
  $(function() {
    var categorys = ${categorys | tojson | safe}

    var refresh_specific = function() {
        $.ajax({
            url: '/mshop/category/specific',
            data: {
                'categ_id': category_vm.choose_id
            },
            type: 'get',
            success: function(e) {
                // [{name: '', childrens: [{}]}]
                category_vm.specifics = JSON.parse(e);
            },
            async: true,
        });
    };


    var category_vm = avalon.define({
        $id: 'categorys',
        choose_id: categorys[0].id,
        categorys: categorys,
        specifics: [{
            'name': 'nihao'
        }],
        choose_category: function(el) {
            category_vm.choose_id = el.id;
            refresh_specific();
        },
    });

    refresh_specific();

    avalon.scan();
  });
  </script>
<% endblock %>
</div>